@{
    ViewData["Title"] = "仪表板";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>仪表板</h1>
    <div>
        <button id="refreshDashboard" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-clockwise"></i> 刷新
        </button>
    </div>
</div>

<div id="dashboardContent">
    <div class="d-flex justify-content-center py-5">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            loadDashboardData();
            
            // 刷新按钮事件
            document.getElementById('refreshDashboard').addEventListener('click', function() {
                loadDashboardData();
            });
            
            // 加载仪表板数据
            function loadDashboardData() {
                fetch('/api/dashboard/stats')
                    .then(response => response.json())
                    .then(data => {
                        renderDashboard(data);
                    })
                    .catch(error => {
                        console.error('Error loading dashboard data:', error);
                        document.getElementById('dashboardContent').innerHTML = 
                            '<div class="alert alert-danger">加载数据失败，请刷新页面重试。</div>';
                    });
            }
            
            // 渲染仪表板
            function renderDashboard(data) {
                let html = `
                    <div class="row mb-4">
                        <div class="col-md-3 mb-3">
                            <div class="card border-primary h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h5 class="card-title">员工总数</h5>
                                            <h2 class="mb-0 mt-3">${data.employeeCount}</h2>
                                        </div>
                                        <div class="text-primary">
                                            <i class="bi bi-people display-4"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <a href="#" class="text-decoration-none small">查看详情 <i class="bi bi-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card border-success h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h5 class="card-title">客户总数</h5>
                                            <h2 class="mb-0 mt-3">${data.customerCount}</h2>
                                        </div>
                                        <div class="text-success">
                                            <i class="bi bi-person-vcard display-4"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <a href="#" class="text-decoration-none small">查看详情 <i class="bi bi-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card border-info h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h5 class="card-title">商品总数</h5>
                                            <h2 class="mb-0 mt-3">${data.productCount}</h2>
                                        </div>
                                        <div class="text-info">
                                            <i class="bi bi-box-seam display-4"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <a href="#" class="text-decoration-none small">查看详情 <i class="bi bi-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card border-warning h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h5 class="card-title">订单总数</h5>
                                            <h2 class="mb-0 mt-3">${data.orderCount}</h2>
                                        </div>
                                        <div class="text-warning">
                                            <i class="bi bi-cart display-4"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <a href="#" class="text-decoration-none small">查看详情 <i class="bi bi-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8 mb-4">
                            <div class="card">
                                <div class="card-header bg-white">
                                    <h5 class="card-title mb-0">销售趋势</h5>
                                </div>
                                <div class="card-body">
                                    <div id="salesChart" style="height: 250px; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center;">
                                        <p class="text-muted mb-0">图表将在此处显示</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-4">
                            <div class="card">
                                <div class="card-header bg-white">
                                    <h5 class="card-title mb-0">库存预警</h5>
                                </div>
                                <div class="card-body p-0">
                                    <ul class="list-group list-group-flush">`;
                
                // 动态生成库存预警列表
                data.lowStockItems.forEach(item => {
                    const badgeClass = item.status === '库存不足' ? 'bg-danger' : 'bg-warning';
                    html += `
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>${item.name}</span>
                            <span class="badge ${badgeClass} rounded-pill">${item.status}</span>
                        </li>`;
                });
                
                html += `
                                    </ul>
                                </div>
                                <div class="card-footer text-center bg-white">
                                    <a href="#" class="text-decoration-none">查看全部</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 mb-4">
                            <div class="card">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                    <h5 class="card-title mb-0">最近订单</h5>
                                    <a href="#" class="text-decoration-none">查看全部</a>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>订单号</th>
                                                    <th>客户</th>
                                                    <th>日期</th>
                                                    <th>金额</th>
                                                    <th>状态</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>`;
                                            
                // 动态生成最近订单列表
                data.recentOrders.forEach(order => {
                    let statusClass;
                    switch(order.status) {
                        case '已完成': statusClass = 'bg-success'; break;
                        case '处理中': statusClass = 'bg-warning'; break;
                        case '已发货': statusClass = 'bg-primary'; break;
                        case '待付款': statusClass = 'bg-info'; break;
                        default: statusClass = 'bg-secondary';
                    }
                    
                    html += `
                        <tr>
                            <td>${order.id}</td>
                            <td>${order.customer}</td>
                            <td>${order.date}</td>
                            <td>¥${order.amount.toFixed(2)}</td>
                            <td><span class="badge ${statusClass}">${order.status}</span></td>
                            <td><a href="#" class="btn btn-sm btn-outline-primary">查看</a></td>
                        </tr>`;
                });
                
                html += `
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`;
                    
                document.getElementById('dashboardContent').innerHTML = html;
                
                // 在这里可以初始化图表
                // initSalesChart();
            }
            
            // 图表初始化函数
            function initSalesChart() {
                // 这里可以使用Chart.js等库初始化图表
                // 此处省略实现
            }
        });
    </script>
} 